var chartDom = document.getElementById("echarts1");
var num = document.querySelector(".num1");
var myChart = echarts.init(chartDom);
var option;
let labels = [
  /* '本科生', '研究生', '留学生', '教职工' */
];
const offsetX = 14;
const offsetY = 7;
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    // 会canvas的应该都能看得懂，shape是从custom传入的
    const xAxisPoint = shape.xAxisPoint;
    // console.log(shape);
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x - offsetX, shape.y - offsetY];
    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
    const c3 = [xAxisPoint[0], xAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  },
});
// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const c1 = [shape.x, shape.y];
    const c2 = [xAxisPoint[0], xAxisPoint[1]];
    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
    const c4 = [shape.x + offsetX, shape.y - offsetY];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  },
});
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function (ctx, shape) {
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
    const c3 = [shape.x, shape.y - offsetX];
    const c4 = [shape.x - offsetX, shape.y - offsetY];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  },
});
// 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);

let VALUE = [
  /* 100, 200, 300, 400 */
];

function ajax1() {
  $.ajax({
    url: "/large-screen/organization/selectOrganizationPersonCountV2",
    type: "GET",
    crossDomain: true,
    dataType: "json",
    async: false,
    success: function (res) {
      // console.log(res);
      res.data.forEach((item) => {
        if (item.organizationCnName === "总数") {
          num.innerText = item.count;
        }
      });
      // num.innerText = res.data[6].count
      labels = res.data
        .map((item, index) => {
          return item.organizationCnName;
        })
        .splice(0, res.data.length - 1);
      VALUE = res.data
        .map((item) => {
          return item.count;
        })
        .splice(0, res.data.length - 1);
    },
    error: function (xhr, status) {
      console.log(status);
    },
  });
  option = {
    //   backgroundColor: "#012366",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      formatter: function (params, ticket, callback) {
        const item = params[1];
        return item.name + " : " + item.value;
      },
    },
    grid: {
      left: "2%",
      right: "2%",
      top: "25%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "rgba(255,255,255,.8)",
        interval: 0,
        // rotate: -10,
        /* formatter: function (value) {
          return value.split("").join("\n"); //垂直显示
        }, */
      },
      nameTextStyle: {
        color: "#fff",
      },
      data: labels,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "rgba(255,255,255,.8)",
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: ["#ccc"],
        },
      },
    },
    series: [
      {
        type: "custom",
        renderItem: (params, api) => {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#276ADE" },
                    { offset: 1, color: "rgba(17, 23, 42, 0.1)" },
                  ]),
                },
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#276ADE" },
                    { offset: 1, color: "rgba(17, 23, 42, 0.1)" },
                  ]),
                },
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#276ADE" },
                    { offset: 1, color: "#276ADE" },
                  ]),
                },
              },
            ],
          };
        },
        data: VALUE,
      },
      {
        type: "bar",
        label: {
          normal: {
            show: true,
            position: "top",
            // formatter: (e) => {
            //     return e.value + "次";
            //     /*console.log(e)
            //                 switch (e.name) {
            //                     case '1001':
            //                         return e.value;
            //                     case '1002':
            //                         return VALUE[1];
            //                     case '1003':
            //                         return VALUE[2];
            //                 }*/
            // },
            formatter: function (params) {
              return `{shadow|${params.value}}`;
            },
            rich: {
              shadow: {
                fontSize: 16,
                color: "#fff",
                textShadowColor: "#9DC8FF",
                textShadowBlur: 5,
              },
            },
            offset: [0, -15],
          },
        },
        itemStyle: {
          color: "transparent",
        },
        tooltip: {},
        data: VALUE,
      },
    ],
  };
  option && myChart.setOption(option);
}

ajax1()

setInterval(() => {
  ajax1()
}, 86400000);
